<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/cascade/production/build-full.min.css" />
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/site.css" />
        <!--[if lt IE 8]><link rel="stylesheet" href="assets/css/cascade/production/icons-ie7.min.css"><![endif]-->
        <!--[if lt IE 9]><script src="assets/js/shim/iehtmlshiv.js"></script><![endif]-->
        <title>Cascade Framework</title>
        <meta name="description" content="Professional Frontend framework that makes building websites easier than ever.">
        <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">

        </style>
    </head>
    <body class="narrow">
        <div class="site-center">
            <div class="site-body">
                <div class="site-header">
                    <div class="tags sitemenutags">
                        <div class="cell">
                            <ul class="nav blocks">
                                <li class=""><a href="https://github.com/jslegers/cascadeframework/archive/master.zip" class="">Download v1.5</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col width-fill sitemenu">
                        <div class="col width-fit mobile-width-fit">
                            <div class="cell">
                                <a href="index.html" class="logo"></a>
                            </div>
                        </div>
                        <div class="col width-fill mobile-width-fill">
                            <div class="cell">
                                <ul class="nav">
                                    <li><a href="grid.html">Grid</a></li>
                                    <li class="active"><a href="typography.html">Typography</a></li>
                                    <li><a href="icons.html">Icons</a></li>
                                    <li><a href="components.html">Components</a></li>
                                    <li><a href="templates.html">Templates</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="sitemenu-responsive col collapsible collapsed">
                        <div class="col collapse-trigger">
                            <div class="cell">
                                <ul class="nav ">
                                    <li><a href="#"><span class="icon icon-32 icon-align-justify"></span></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col">
                            <div class="left collapse-section">
                                <div class="cell">
                                    <ul class="nav">
                                        <li><a href="index.html">Home</a></li>
                                        <li><a href="grid.html">Grid</a></li>
                                        <li><a href="typography.html">Typography</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="components.html">Components</a></li>
                                        <li><a href="templates.html">Templates</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="cell">
                        <div class="col">
                            <div class="cell">
                                <div class="page-header">
                                    <h1>Typography <small>documentation</small></h1>
                                </div>
                            </div>
                        </div>


                        <div class="col width-1of4">
                            <div class="cell menu">
                                <span class="tiny">Typography types</span>
                                <ul class="left nav links">
                                    <li><a href="typography.html">Basic typography</a></li>
                                    <li><a href="typography-form.html">Form elements</a></li>
                                    <li class="active"><a href="typography-additional.html">Additional markup</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col width-fill">













                            <div class="col">
                                <div class="cell">
                                    <h2>Page header</h2>
                                    <p>Herebelow is an example of a page header</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <div class="page-header">
                                                        <h1>Page header <small>with subheader</small></h1>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>














                            <div class="col">
                                <div class="cell">
                                    <h2>Labels</h2>
                                    <p>Use the "label" class to create fancy labels.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <span class="label">Warning</span> All your base are belong to us
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                            <div class="col">
                                <div class="cell">
                                    <h2>Fatty</h2>
                                    <p>Use the "fatty" class to create markup that stands out among the rest. By default, it is bold and has a slightly larger font-size.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    You can use the <span class="fatty">"fatty"</span> class to make markup stand out more.
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>




                            <div class="col">
                                <div class="cell">
                                    <h2>Tiny</h2>
                                    <p>Use the "tiny" class to do somewhat the opposite of the "Fatty" class.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <span class="tiny">This is tiny text</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>







                            <div class="col">
                                <div class="cell">
                                    <h2>Color modifiers</h2>
                                    <p>Cascade framework supports 10 default colors for changing the background color or text color of an element. It is recommended, however, to use
                                        semantic classes to override default colors or to replace the default color scheme with your own.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="cell">
                                            <div class="col">
                                                <div class="cell">
                                                    <form>
                                                        <div class="col">
                                                            <div class="cell">
                                                                <div class="button-group">
                                                                    <div class="button background-red">1</div>
                                                                    <div class="button background-orange">2</div>
                                                                    <div class="button background-yellow">3</div>
                                                                    <div class="button background-green">4</div>
                                                                    <div class="button background-blue">5</div>
                                                                    <div class="button background-purple">6</div>
                                                                    <div class="button background-pink">7</div>
                                                                    <div class="button background-grey">8</div>
                                                                    <div class="button background-black">9</div>
                                                                    <div class="button background-white">10</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="cell">
                                                                <div class="label background-red">label 1</div><!--
                                                                --><div class="label background-orange">label 2</div><!--
                                                                --><div class="label background-yellow">label 3</div><!--
                                                                --><div class="label background-green">label 4</div><!--
                                                                --><div class="label background-blue">label 5</div><!--
                                                                --><div class="label background-purple">label 6</div><!--
                                                                --><div class="label background-pink">label 7</div><!--
                                                                --><div class="label background-grey">label 8</div><!--
                                                                --><div class="label background-black">label 9</div>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="cell">
                                                                <span class="icon icon-64 icon-rss background-orange"></span>
                                                                <span class="icon icon-64 icon-heart color-red"></span>
                                                                <span class="icon icon-64 icon-cogs color-grey"></span>
                                                                <span class="icon icon-64 icon-bolt color-yellow"></span>
                                                                <span class="icon icon-64 icon-leaf color-green"></span>
                                                                <span class="icon icon-64 icon-pinterest-sign color-red"></span>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="cell">
                                                                <span class="icon icon-32 icon-minus background-red"></span>
                                                                <span class="icon icon-32 icon-plus background-green"></span>
                                                                <span class="icon icon-32 icon-thumbs-down background-red"></span>
                                                                <span class="icon icon-32 icon-thumbs-up background-green"></span>
                                                                <span class="icon icon-32 icon-remove background-red"></span>
                                                                <span class="icon icon-32 icon-ok background-green"></span>
                                                                <span class="icon icon-32 icon-ban-circle color-red"></span>
                                                                <span class="icon icon-32 icon-ok color-green"></span>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="cell background-black">
                                                                <span class="icon icon-64 icon-star color-yellow"></span>
                                                                <span class="icon icon-64 icon-star color-yellow"></span>
                                                                <span class="icon icon-64 icon-star-empty color-yellow"></span>
                                                            </div>
                                                        </div>
                                                        <div class="col">
                                                            <div class="panel cell">
                                                                <div class="header background-blue color-yellow">Header</div>
                                                                <div class="body">
                                                                    <div class="cell">
                                                                        <p>
                                                                            <span class="icon icon-32 icon-comment color-yellow float-left"></span>
                                                                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                                                        </p>

                                                                    </div>
                                                                </div>
                                                                <div class="body">
                                                                    <div class="cell">
                                                                        <p>
                                                                            <span class="icon icon-32 icon-comment color-yellow float-left"></span>
                                                                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                                <div class="footer background-blue color-yellow">Footer</div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>













                            <div class="col">
                                <div class="cell">
                                    <h2>Gradient</h2>
                                    <p>Use the "gradient" class to add a basic cross-browser gradient.</p>
                                </div>
                            </div>
                            <div class="col">
                                <div class="cell panel">
                                    <div class="body">
                                        <div class="col">
                                            <div class="cell">
                                                <div class="col">
                                                    <div class="cell">
                                                        <span class="button-group">
                                                            <a class="gradient button icon-button" href="#"><span class="icon icon-italic"></span></a>
                                                            <a class="gradient button icon-button" href="#"><span class="icon icon-bold"></span></a>
                                                            <a class="gradient button icon-button" href="#"><span class="icon icon-underline"></span></a>
                                                            <a class="gradient button icon-button" href="#"><span class="icon icon-paper-clip"></span></a>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell panel">
                                                        <div class="gradient header">
                                                            Header
                                                        </div>
                                                        <div class="body">
                                                            <div class="cell">
                                                                This is a panel body.
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="cell">
                                                        <table class="datasheet">
                                                            <thead>
                                                                <tr>
                                                                    <th class="gradient" style="width: 2%;">#</th>
                                                                    <th class="gradient" style="width: 10%;" nowrap="nowrap">ID</th>
                                                                    <th class="gradient" style="width: 20%;" nowrap="nowrap">Name</th>
                                                                    <th class="gradient" style="width: 22%;" nowrap="nowrap">Dept</th>
                                                                    <th class="gradient" style="width: 46%;" nowrap="nowrap">Notes</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <th class="gradient">1</th>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <th class="gradient">2</th>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <th class="gradient">3</th>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <th class="gradient">4</th>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                </tr>
                                                                <tr>

                                                                    <th class="gradient">5</th>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                    <td><input type="text" /></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>













                        </div>
                    </div>
                </div>
            </div>
            <div class="site-footer">
                <div class="cell">
                    <div id="sociallogos">
                        <a href="https://twitter.com/cascadecss"><span class="icon icon-32 icon-twitter"></span></a>
                        <a href="http://www.facebook.com/cascadeframework"><span class="icon icon-32 icon-facebook-sign"></span></a>
                        <a href="https://github.com/CascadeFramework"><span class="icon icon-32 icon-github"></span></a>
                        <div class="col">
                            &#169; 2013, <a href="http://www.johnslegers.com/">John Slegers</a>
                        </div>
                    </div>
                    <a href="http://www.cascade-framework.com/" class="powered-by"></a>
                </div>
            </div>
        </div>
        <script src="assets/js/app.js"></script>
    </body>
</html>